<template>
  <view class="container" style="background-color: #fff">
    <view class="navbar">
      <!-- 车辆 -->
      <template v-if="inoutBound.businessType == 0 || inoutBound.businessType == 1">
        <view
          v-for="(item, index) in navList"
          :key="index"
          class="nav-item"
          :class="{ current: tabCurrentIndex === item.key }"
          @click="tabClick(item.key)"
          v-if="inoutBound.businessType == 0 || inoutBound.businessType == 2"
        >
          {{ item.text }}
        </view>

        <view
          v-for="(item, index) in navList2"
          :key="index"
          class="nav-item"
          :class="{ current: tabCurrentIndex === item.key }"
          @click="tabClick(item.key)"
          v-if="inoutBound.businessType == 1 || inoutBound.businessType == 3"
        >
          {{ item.text }}
        </view>
      </template>

      <!-- 船舶 -->
      <template v-if="inoutBound.businessType == 2 || inoutBound.businessType == 3">
        <view class="nav-item">
          {{ inoutBound.businessType == 2 ? '出库信息' : '入库信息' }}
        </view>
      </template>
    </view>

    <!-- 出入库信息 -->
    <uni-list v-if="inoutBound" v-show="tabCurrentIndex == 'inoutBound'">
      <uni-list-item title="货品名称" :rightText="inoutBound.merchandiseName" />
      <uni-list-item title="业务类型" :rightText="inoutBound.businessType === 0 ? '装车' : inoutBound.businessType === 1 ? '卸车' : inoutBound.businessType === 2 ? '装船' : '卸船'" />
      <uni-list-item title="流水号" :rightText="inoutBound.serialNo" />
      <uni-list-item title="作业单号" :rightText="inoutBound.workNo" />
      <uni-list-item title="客户名称" :rightText="inoutBound.customerName" />
      <uni-list-item title="提货单号" :rightText="inoutBound.billNo" v-if="inoutBound.businessType == 0 || inoutBound.businessType == 2" />
      
      <uni-list-item title="车牌号" :rightText="inoutBound.carNo" v-if="inoutBound.businessType == 0 || inoutBound.businessType == 1" />
      <uni-list-item title="罐组号" :rightText="inoutBound.tankGroup" />
      <uni-list-item title="罐号" :rightText="inoutBound.tankNo" />
      <uni-list-item title="操作员" :rightText="inoutBound.userName" />
      <uni-list-item title="验证码/IC卡号" :rightText="inoutBound.validate" />
      <uni-list-item title="合同号" :rightText="inoutBound.contractNo" />
      

      <template v-if="inoutBound.businessType == 0 || inoutBound.businessType == 1">
        <uni-list-item title="鹤位号" :rightText="inoutBound.unloadPositionNo" />
        <uni-list-item title="定量" :rightText="`${inoutBound.preWeight}kg`" />
        <uni-list-item title="皮重" :rightText="`${inoutBound.tareWeight}kg`" />
        <uni-list-item title="毛重" :rightText="`${inoutBound.grossWeight}kg`" />
        <uni-list-item title="流量计" :rightText="`${inoutBound.netWeight}kg`" />
        <uni-list-item title="结算量" :rightText="`${inoutBound.settleAmount}kg`" />
      </template>

      <template v-if="inoutBound.businessType == 2 || inoutBound.businessType == 3">
        <uni-list-item title="合同类别" :rightText="inoutBound.contractCategory" />
        <uni-list-item title="合同属性" :rightText="inoutBound.contractAttribute" />
        <uni-list-item title="合同名称" :rightText="inoutBound.contractName" />
        <uni-list-item title="船舶名称" :rightText="inoutBound.shipName" />
        <uni-list-item title="航次" :rightText="inoutBound.shipFlight" />
        <uni-list-item title="泊位号" :rightText="inoutBound.berthsName" />
        <uni-list-item title="输油臂" :rightText="inoutBound.armName" />
        <uni-list-item title="商检量" :rightText="`${inoutBound.inspectWeight}t`" />
        <uni-list-item title="定量" :rightText="`${inoutBound.preWeight}t`" />
        <uni-list-item title="流量计" :rightText="`${inoutBound.netWeight}t`" />
        <uni-list-item title="结算量" :rightText="`${inoutBound.settleAmount}t`" />
      </template>

      <uni-list-item title="开始时间" :rightText="inoutBound.beginDate" />
      <uni-list-item title="有效期" :rightText="inoutBound.validateDate" />
      <uni-list-item title="下装时间" :rightText="inoutBound.downloadDate" />
      <uni-list-item title="结束时间" :rightText="inoutBound.loadingEndDate" />
    </uni-list>

    <!-- 货单信息 -->
    <uni-list v-if="business" v-show="tabCurrentIndex == 'business'">
      <!-- <uni-list-item title="车牌号" :rightText="business.carNo" /> -->
      <uni-list-item title="追溯登记号" :rightText="business.traceUrlUnicode" />
      <uni-list-item title="追溯批次号" :rightText="business.traceBatchNo" />
      <uni-list-item title="发货企业" :rightText="business.enterpriseName" v-if="inoutBound.businessType == 0 || inoutBound.businessType == 2" />
      <uni-list-item title="货品名称" :rightText="business.merchandiseName" />
      <uni-list-item title="发货数量" :rightText="`${business.amount}kg`" />
      <!-- <uni-list-item title="提货单号" :rightText="business.billNo" />
      <uni-list-item title="提货单位" :rightText="business.billName" /> -->
      <!-- <uni-list-item title="规格" :rightText="business.unit" /> -->
      <uni-list-item title="收货企业" :rightText="business.receiveEnterpriseName" v-if="inoutBound.businessType == 1 || inoutBound.businessType == 3" />
      <uni-list-item title="收货用途" :rightText="business.receivePurpose" v-if="inoutBound.businessType == 1 || inoutBound.businessType == 3" />
      <uni-list-item title="货品来源" :rightText="business.merchandiseSource" />
      <uni-list-item title="是否发往外省" :rightText="business.isToOuter === 0 ? '否':'是'" />
    </uni-list>

    <!-- 承运车辆信息 -->
    <uni-list v-if="carInoutVo" v-show="tabCurrentIndex == 'carInoutVo'">
      <uni-list-item title="车牌号" :rightText="carInoutVo.carNo" />
      <uni-list-item title="电子运单号" :rightText="carInoutVo.transportCode" />
      <uni-list-item title="承运企业" :rightText="carInoutVo.belongEnterprise" />
      <!-- 1-集装箱车；2-槽罐车；3-普通危险化学品车；5-管道；6-挂车；7-槽罐挂车； 8-集装箱挂车；0-非危化品车 -->
      <uni-list-item title="车辆性质" :rightText="carInoutVo.carType === 0 ? '非危化品车辆' : '危化品车辆'" />
      <uni-list-item title="挂车车牌号" :rightText="carInoutVo.containerNumber" />
      <uni-list-item title="驾驶员姓名" :rightText="carInoutVo.driverName" />
      <uni-list-item title="驾驶员身份证号" :rightText="carInoutVo.driverIdcard" />
      <uni-list-item title="押运员姓名" :rightText="carInoutVo.escort" />
      <uni-list-item title="押运员身份证号" :rightText="carInoutVo.escortIdcard" />
    </uni-list>
  </view>
</template>
<script>
export default {
  data() {
    return {
      id: null,
      type: "sp",
      businessType: null
    };
  },
  onLoad(payload) {
    this.id = payload.id;
    this.type = payload.type || "detail";
    this.businessType = payload.businessType
  },
};
</script>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { apis as APIS } from "@/api/yiqiyipin.js";
import { router } from "@/router/index.js";

const business = ref({})   // 货单信息
const inoutBound = ref({})  // 出入库信息
const carInoutVo = ref({})  // 承运车辆信息
const pageType = ref()

onMounted(async () => {
  const { id, type, businessType } = getCurrentInstance().data;
  pageType.value = type;
  if (id) {
    const res = await APIS.inoutDetail({
      storageId: id,
      businessType
    });
    if(res && res.data){
      business.value = res.data.business
      inoutBound.value = res.data.inoutBound
      carInoutVo.value = res.data.carInoutVo
    }
  }
});

const tabCurrentIndex = ref("inoutBound");
const navList = ref([
  { text: "出库信息", key: "inoutBound" },
  { text: "运单信息", key: "carInoutVo" },
  { text: "追溯信息", key: "business" },
  // { text: "船舶信息", key: "shipInfo" },
]);

const navList2 = ref([
  { text: "入库信息", key: "inoutBound" },
  { text: "运单信息", key: "carInoutVo" },
  { text: "追溯信息", key: "business" },
  // { text: "船舶信息", key: "shipInfo" },
]);

const tabClick = (key) => {
  tabCurrentIndex.value = key;
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #eee !important;
  overflow: auto;
}

.navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 15px;
    position: relative;

    &.current {
      color: blue;

      &:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 44px;
        height: 0;
        // border-bottom: 2px solid $base-color;
      }
    }
  }
}

::v-deep .uni-list-item__extra-text{
  max-width: 100vw;
}
</style>
